<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Shopping list example</title>
    <style>
      li {
        margin-bottom: 10px;
      }

      li button {
        font-size: 8px;
        margin-left: 20px;
        color: #666;
      }
	  .cont p{
		  display: inline;
	  }
    </style>
  </head>
  <body>

    <h1>My shopping list</h1>

    <div>
      <label for="item">Enter a new item:</label>
      <input type="text" name="item" id="item">
      <button onclick="addItem()">Add item</button>
    </div>

    <ul id="box">
      <!-- <li><span>12312</span><button onclick="deleteTheDom(this)">Delete</button></li> -->
    </ul>
	

    <script>
      /**
      要求：
      1、点击additem 将输入框中的文字放置列表中，并将输入框清空
      2、不允许输入空值 ，空值提示
      3、列表中的行点击delete按钮可实现删除该行
      4、刷新页面将输入框清空
      5、实现方式必须为第10章内容，dom节点可以随意添加属性
      6、截至下周二前
      **/
      function addItem(){
		 var item=document.getElementById("item").value;
		 if(item=="")
		 {
			 alert("请输入数据");
			 return false;
		 }
		 else{
			document.getElementById("item").value=""; 
			
			 var li1 = document.createElement('li');
			 
			 li1.innerHTML="<span>"+item+"</span><button onclick='deleteTheDom(this)'>Delete</button>";
			 var box =document.getElementById("box");
			box.appendChild(li1);
		 }
		 
      }
      function deleteTheDom(_ob){
        //_ob指向当前节点
		console.log(_ob.parentNode);
		var box = document.getElementById('box');
		box.removeChild(_ob.parentNode);
		
      }

    </script>
  </body>
</html>